<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<style type="text/css">
	.main {
		width: 100%;
		height: 100%;
	}

	.left,.right {
		float: left;
		width: 39%;
		height: 100%;
		padding: 0px 15px;
	}

	.center {
		float: left;
		width: 100px;
		height: 100%;
		margin-top: 70px;
		margin-left: 10px;
		margin-right: 10px;
		padding: 0px;
	}

	.top {
		height: 30px;;
		width: 100%;
		padding-top: 10px;
	}

	.treePanel,.usersPanel {
		height: 100%;
		width: 100%;
		margin-top: 4px;
	}

	.left .treePanel {
		border: #ccc solid 1px;
		overflow: auto;
	}

	.main .select-panel {
		width: 100%;
		height: 200px;
	}

	#succ_dialog {
		z-index: 1051;
	}
</style>
<div class="modal-body">
	<div class="row">
		<div class="main">

			<!-- 左侧面板 -->
			<div class="left">
				<div class="top">
					<span>组织机构人员列表</span>
				</div>
				<div class="treePanel select-panel">
					<ul id="tree" class="ztree"></ul>
				</div>
			</div>

			<!-- 中间面板 -->
			<div class="center">
				<button class="btn btn-sm btn-primary" id="btn-add-user"
					style="width: inherit; height: 25px; padding-top: 0.5px; margin-bottom: 10px;">
					添加</button>
				<button class="btn btn-sm btn-primary" id="btn-del-user"
					style="width: inherit; height: 25px; padding-top: 0.5px; margin-bottom: 10px;">
					删除</button>
				<button class="btn btn-sm btn-primary" id="btn-delAll-user"
					style="width: inherit; height: 25px; padding-top: 0.5px; margin-bottom: 10px;">
					删除全部</button>
			</div>

			<!-- 右侧面板 -->
			<div class="right">
				<div class="top">
					<span>已选人员列表</span>
				</div>
				<div class="usersPanel">
					<form id="selectUsers">
						<input type="hidden" name="id" value="${id}" /> <select
							class="form-control select-panel" id="users" name="userIds"
							multiple="multiple">
						</select>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	<button type="button" id="submit_btn" class="btn btn-primary">确定</button>
</div>

<script type="text/javascript">
	$( function() {

		var selUserFromLeftToRight = function() {
			var nodes = zTree.getCheckedNodes(true);
			var optons = $('#users').find('option');
			for (var i = 0; i < nodes.length; i++) {
				var node = nodes[i];
				var isLeaf = !node.isParent;
				if (isLeaf) {
					var isHave = false;
					$(optons).each(function(j, item) {
						if ($(item).val() == nodes[i].id) {
							isHave = true;
						}
					});
					if (!isHave && node.type == 'user') {
						$('#users').append('<option value="'+nodes[i].id+'">' + nodes[i].name + '</option>');
					}
				}
			}
		};

		//添加按钮
		$("#btn-add-user").click(selUserFromLeftToRight);

		//删除按钮
		$("#btn-del-user").click(function() {
			$('#users').find('option').each(function(i, item) {
				if ($(item).attr('selected') == 'selected' || $(item).attr('selected') == true || item.selected) {
					$(item).remove();
				}
			});
		});

		//全部删除按钮
		$("#btn-delAll-user").click(function() {
			$('#users').empty();
		});

		//保存按钮
		$("#submit_btn").click(function() {
			$(document).jProgressbar.show();
			var opts = $('#users option');
			for (var i = 0; i < opts.length; i++) {
				opts[i].selected = 'selected';
			}
			var options = {
				url : ctxPath + '/user/role!addUsers.action',
				type : 'post',
				data : $("#selectUsers").serialize(),
				success : function(msg) {
					msg = util.strToObj(msg);
					if (msg.code == "success"){
						$("#selectUsers").parents('.modal').modal('hide');
						dialog.calloutAlert(msg.desc,"","success");
					}else{
						$('#users option').removeAttr('selected');
						dialog.alert(msg.desc);
					}
					$(document).jProgressbar.hide();
				},
				error : function() {
					$(document).jProgressbar.hide();
					$("#selectUsers").parents('.modal').modal('hide');
					dialog.calloutAlert("提交异常！","","error");
				}
			};
			$.ajax(options);
		});

		//设置zTree树参数
		var zTreeSetting = {
			view : {
				dblClickExpand : false
			},
			check : {
				enable : true
			},
			data : {
				simpleData : {
					enable : false
				}
			}
		};

		var zTreeNodes = util.strToObj('${treeNodes}');
		var zTree = $.fn.zTree.init($('#tree'), zTreeSetting, zTreeNodes);

		if (zTree.getNodes().length > 0) {
			var node = zTree.getNodes()[0];
			zTree.expandNode(node, true, true, false);
			var userIdsStr = '${userIds}';
			if ($.trim(userIdsStr) != '') {
				userIdsStr = userIdsStr.substring(1, userIdsStr.length - 1);

				var userIds = userIdsStr.split(',');
				for (var i = 0; i < userIds.length; i++) {
					userIds[i] = $.trim(userIds[i]);
				}
				var filter = function(targetNode) {
					var flag = ($.inArray(targetNode.id, userIds) >= 0 && targetNode.type == 'user');
					return flag;
				};
				var nodes = zTree.getNodesByFilter(filter); // 查找节点集合
				for (var i = 0; i < nodes.length; i++) {
					zTree.checkNode(nodes[i], true, true);
				}

				selUserFromLeftToRight();
			}
		}
	});
</script>
